    @import '../default.less';
    .solution {
      &-banner {
        background-image: url('../img/solution/solution_banner.jpg');
      }
      &-bg {
        background-image: url('../img/solution/caseAbout_bg.png');
        background-position: bottom left;
        background-repeat: repeat-x;
      }
      &-bg1 {
        background-image: url('../img/solution/inner_shadow.png');
        background-position: top left;
        background-repeat: repeat-x;
      }
      &-tab {
        @borderColor: #d0d0d0;
        @backgroundColor: #108ee9;
        text-align: left;
        .ant-tabs-nav-container,
        .ant-tabs-nav-wrap,
        .ant-tabs-nav-scroll {
          overflow: visible;
        }
        .ant-tabs-bar {
          margin: 0;
        }
        .ant-tabs-ink-bar {
          &::before {
            content: '';
            width: 16px;
            height: 16px;
            background: @backgroundColor;
            position: absolute;
            top: -8px;
            left: 50%;
            margin-left: -8px;
            z-index: 1;
            transform: rotate(45deg);
          }
        }
        .ant-tabs-nav {
          width: 100%;
          .ant-tabs-tab {
            background: #efefef;
            line-height: 54px;
            text-align: center;
            color: #222;
            font-size: 18px;
            cursor: pointer;
            transition: all .2s ease-in;
            margin: 0px;
            &:not(:last-child) {
              border-right: 1px solid @borderColor;
              &.ant-tabs-tab-active {
                border-right-color: @backgroundColor;
              }
            }
          }
          .ant-tabs-tab-active {
            background: @backgroundColor;
            color: #fff;
          }
        }
        &-content {
          background: @background;
        }
        &-2,
        &-3,
        &-4,
        &-5 {
          border: 1px solid @borderColor;
        }
        &-2 .ant-tabs-tab {
          width: 50%;
        }
        &-3 .ant-tabs-tab {
          width: 33%;
        }
        &-4 .ant-tabs-tab {
          width: 25%;
        }
        &-5 .ant-tabs-tab {
          width: 20%;
        }
        &-line {
          border-right: 1px solid @borderColor;
        }
        &-title {
          line-height: 50px;
          text-align: center;
          font-size: 20px;
        }
        &-content {
          padding: 0 72px;
          font-size: 14px;
          line-height: 28px;
        }
        .anticon-question-circle {
          color: rgb(109, 154, 0);
        }
        .anticon-check-circle {
          color: rgb(98, 173, 248);
        }
      }
      &-image {
        &-image img {
          border-radius: 8px;
          border: 1px solid @borderColor;
          overflow: hidden;
          width: 90%;
          margin: 10px 5%;
        }
      }
      &-product {
        &-content {
          background: @background;
          border: 1px solid @borderColor;
          border-radius: 4px;
          height: 110px;
          a {
            @borderColor: #d7d7d7;
            @borderColorHover: #1ea1dc;
            width: 25%;
            margin: 30px 4%;
            float: left;
            line-height: 44px;
            font-size: 16px;
            color: #222;
            border: 1px solid @borderColor;
            border-radius: 4px;
            background: #ebebec;
            box-sizing: border-box;
            transition: all .2s ease-in;
            &:hover {
              background-color: @borderColorHover;
              border-color: @borderColorHover;
              color: #FFF;
              .solution-product-icon {
                background-position-y: -24px;
              }
            }
            .solution-product-icon {
              width: 24px;
              height: 24px;
              display: inline-block;
              background-image: url('../img/solution/solution_product.png');
              vertical-align: middle;
              margin-top: -2px;
              &-1 {
                background-position: 0 0;
              }
              &-2 {
                background-position: -24px 0;
              }
              &-3 {
                background-position: -48px 0;
              }
            }
          }
        }
      }
      &-partner {
        @borderColor: #d7d7d7;
        @borderColorHover: #1ea1dc;
        &-content {
          height: 240px;
          a {
            float: left;
            display: block;
            margin: 0 0.5% 12px;
            border: 1px solid @borderColor;
            background: #fff;
            padding: 20px;
            width: 19%;
            box-sizing: border-box;
            transition: all .2s ease-in;
            &:hover {
              border-color: @borderColorHover;
            }
            img {
              display: block;
              width: 100%;
            }
          }
        }
      }
      &-more {
        &-open {
          width: 200px;
          padding-left: 8px;
          line-height: 46px;
          height: 46px;
          font-size: 18px;
          color: #01b0ef;
          border-radius: 23px;
          border: 2px solid #01b0ef;
          position: relative;
          margin: 0 auto;
          cursor: pointer;
          &.on {
            border: 0;
            padding: 0;
            font-size: 24px;
            color: #111;
            text-align: center;
            .anticon {
              visibility: hidden;
            }
          }
        }
        &-close {
          font-size: 24px;
          line-height: 48px;
          text-align: center;
          margin-top: 20px;
          cursor: pointer;
          color: #01b0ef;
        }
        a {
          margin: 0 6.66%;
          display: inline-block;
          color: #222;
          font-size: 22px;
          img {
            display: block;
            margin-bottom: 20px;
          }
          &:hover {
            color: #01b0ef;
          }
        }
        &-content {
          padding-bottom: 80px;
          text-align: center;
          display: none;
          position: relative;
          &.on {
            display: block;
          }
        }
      }
      &-bottom {
        padding: 20px 0;
        &-content {
          height: 110px;
        }
        ul li {
          width: 25%;
          float: left;
          text-align: center;
          list-style: none;
          b {
            display: block;
          }
        }
      }
    }